Nicole B. Cignoli - Capstone Portfolio

Menu Exercise – Enhanced Web page Development

July 26, 2007

http://www.saveoursterling.org

 

I chose the challenging assignment of designing my volunteer organization’s web site I asked my co-volunteers for ideas as to what they wanted on their site. I surveyed users of various web design programs to determine which one to use and Dreamweaver came up often as the easiest to use. I downloaded DreamweaverCS3 (“DwCS3”). I scanned literature and documents as well as old photographs to load on the site. I sketched a “story book” layout focusing on each pages’ purpose, audience, look and the subsequent links so that I could download scan or collect the resources to make loading more efficient. I read Jakob Nielsen’s article Part I and Part II and www.Davesite.com html tutorial, DwCS3’s web site tutorials and video workshops. Davesite.com was the best guide to understand steps or to locate “keywords” to search on DwCS3 to get the application’s solution. Davesite.com’s tutorials were written more for the novice versus DwCS3’s tutorials, which were written for the intermediate web designer. DwCS3’s video tutorials were the second best way to learn. I was able to pause the video to try the steps on either the documents provided with Dreamweaver or with my actual site. I downloaded Dreamweaver application on the 14^th and trained myself on the application while designing the site the web site for loading on the 25th.

 

The Design Process

 

Dreamweaver’s best pointer was to define the site in the Local Root Folder before starting. I accepted this at face value but quickly understood the value as I added pages, images and started moving things around. Once the Home Page was defined Dreamweaver either gave a pop-up balloon to ask if I wanted to update links or in Property Inspector suggested to “Refresh” the site. Dreamweaver allowed for three design views – Design, Split and Code. I worked in Split as it allowed quick and easy design using the Property Inspector area while at the same time to show the code that went behind the actions. I created my home page based on an elastic three column, header and footer template. Based on the course reading material, this is the best way for novice designer to maintain consistent layout for a site. I used web-safe colors for the background in an attempt to get as close to sepia as possible. I began a Cascading Style Sheet (“CSS”) and chose a corresponding web-safe font color. However I couldn’t master CSS and had to change font and headings manually. Using Dreamweaver’s Snippets I located a footer design and used that template then modified the font and color to blend with the site. As easy as this seemed, I had difficulties with the body of the Home Page to create the correct background color throughout. I referred to Davesite.com’s tutorial to determine the missing code and had to go through the Home Page’s code line by line to locate the missing bg= “FFFF99”.

 

Dreamweaver made designing very easy. I placed my cursor where I wished to place text. DwCS3’s code was slightly different in certain text elements such as BOLD. Davesite.com indicated it would be <b>, but DwCS3 was <strong>. When I wanted to align text to images I revisited Davesite.com’s tutorial for clearer more concise directions and then typed the code in DwCS3 and validated my work in Property Inspector. I used the organization’s logo as a link within the page back to the Home Page. I used the Browse Folder and the Point-to-File functions to link to the correct page in the Site Folder. For external sites, I copied and pasted the URL into the area or, as on the Home Page, a link within the Opera House photograph. I constantly saved my work and previewed the page in Safari or Opera as default testing sites within DwCS3. I also printed my pages to verify that each would fit on one page and an attempt to compact the view screen.

 

Placing music and video was one of the hardest parts of the assignment. Again, Davesite.com’s tutorial was easier to follow than DxCS3. Although DwCS3 suggested Flash and Shockwave, I reverted to iTunes, iPhoto, and Quicktime and copied and pasted the URLs from the internet and placed them in the Link file under the Source field. I embedded a hidden, auto-start plug-in for Real Player on the Home Page to play music and QuickTime on the Coming Attractions Page to play a short loop video of interior photographs. However, I couldn’t get them to work when I launched to the public. (Back to the top)

 

Publishing

 

Prior to publishing I realized that the site required an index.html. I didn’t understand than in the tutorials. I located this reference on DwCS3’s internet Help Site. Luckily I found that out and inserted meta, base and keyword tags on the index page while I was waiting for my site to become active and just before “putting” on the web. I made a copy of the Home Page and renamed the original Home Page to index.html then deleted the copy.

 

As most of my time was spent understanding Dreamweaver programming, I ordered my host close to the end of the assignment. I chose Globat.com as the server for the site to avoid ad pop-ups and after calculating the amount of space I would need and anticipated my volunteer organization to need it was the best fit. I had a difficult “putting” my web site up. I used Globat’s and DwCS33’s video tutorials to place the FTP information. I had to call Globat.com Support as I was missing the correct host/server address which and then the site loaded.

 

Results and Analysis

 

Designing web sites and web pages involves complex programming skills and constant testing on a testing server. Although Dreamweaver made it very easy with click and drag functions, dialogue boxes, tutorials and video workshops, I wasn’t able to master various elements or have them successfully publish. I am very disappointed that my music and video elements did not publish. I have spent about two days re-programming and reading the various tutorials and still was unable to have them publish properly. I also know that there is a place in the head, meta tag to place the URL for the search engines find this site, but when I edited the Head Tag, the edits skewed the page and I couldn’t find a good tutorial to explain the process to me. Although my site comprised of only six pages, CSS mastery will make design and editing proceed much faster.  I liked the idea of a guest book and used forms to develop the document. But having ordered my web site host at the end of the assignment which didn’t leave enough time to verify the information Davesite.com indicated my server would provide. I believe I would need a separate page for the input within the site. As I go back to master video and music placement image, video, and audio plug-ins will be compressed to enable the site to download faster. Dreamweaver has Device Central design application so a web page is easily viewed on hand-held devices, which would be the next step for this site.  I look forward to adding higher-level design functions, better buttons and radio dials, and a fundraising thermometer. Which I believe would be possible in Adobe InDesign.

 

Overall, I am pleased I attempted the project although I am not satisfied with some of my results. I have a better appreciation of web design. It is time consuming for the novice and intermediate designer while at the same time it’s exciting to learn something new and creative in order to share ideas and information with friends, colleagues and strangers. Then next step for me will be to take courses to become a good Webmaster to present a better web site. (Back to the top)